<template>
  <div class="pdf">
    <van-nav-bar
        class="app-nav-bar"
        :title="title"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="main-wrap">
      <pdf
          ref="pdf"
          v-for="i in numPages"
          :key="i"
          :src="pdfSrc"
          :page="i"
          @page-loaded="handlePdfLoaded"
          @progress="loadedRatio = $event">
      </pdf>
    </div>

    <van-overlay :show="loading">
      <div class="wrapper" @click.stop>
        <van-circle v-model="loadedRatio" :rate="1" :speed="loadedRatio" v-show="loadedRatio==100?false:true" :text="text"/>
        <van-loading color="#ff" text-color="#fff" v-if="loadedRatio==100?true:false" size="24px">整理文件中,请稍后...
        </van-loading>
      </div>
    </van-overlay>


  </div>

</template>
<script>
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
import {pdfdown, onlineread, commonFileInterface, commonFileInterfacepath} from '@/api/common'
import pdf from 'vue-pdf'

export default {
  name: 'vuepdf',
  components: {
    pdf
  },
  props: {},

  data() {
    return {

      tableName: this.$route.query.tableName,
      sysId: this.$route.query.sysId,
      fileName: this.$route.query.fileName,
      title: ''||this.$route.query.title,
      num:this.$route.query.num,
      loading: true,
      numPages: null, // pdf 总页数
      pdfSrc: '',
      pdfTotal: 1, // pdf总页数
      pdfNum: 1, // 当前页
      pdfRotate: 0, // 旋转角度
      pdfurl: '',
      loadedRatio: 0,
      currentRate: 0,

    }
  },

  created() {

  },
  mounted: function () {

    this.getNumPages('http://218.89.178.103:9000/innovate/commonFileInterface2?tableName=' + this.tableName + '&sysId=' + this.sysId + '&fileName=' + this.fileName+'&num='+this.num)



  },

  computed: {
    text() {
      return "正在下载文件" + this.loadedRatio.toFixed(0) + '%';
    },
  },
  methods: {
    getNumPages(ul) {
      //console.log(ul)
      this.pdfSrc = pdf.createLoadingTask({url: ul, cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
        cMapPacked: true},{
           onProgress:(status) => {
      
          this.loadedRatio = (status.loaded/status.total) * 100
           //console.log('pp',this.loadedRatio)
        }
        }
        )
      this.pdfSrc.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
    handlePdfLoaded(e) {
     // console.log(e)
      if (e === this.numPages) {
        this.$nextTick(() => {
          setTimeout(() => {

            this.loading = false
          }, 500)
        })
      }
    },
    handlePdfTask(a) {
      //console.log(a)
      a.promise
          .then(pdf => {
            //console.log(Pdf)
            this.pdfTotal = pdf.numPages
            //console.log(pdf.numPages)
          }).catch(err => {
        console.error('pdf 加载失败', err)
      })
    },
  }
}
</script>
<style lang="less" scoped>
.main-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 1px;
  overflow-y: scroll;
  background-color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

/deep/ .van-circle__text {
  color: #fff !important;
}
</style>
